<style>
main {
    background:{{ section.settings.abg }};
}
.btl-main {
    margin-top: 50px;
}
.btl-item {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-flow: wrap;
}
li.btl-list {
    list-style: none;
    width: 33.33%;
    padding: 10px 10px;
}
li.btl-list a {
    position: relative;
    display: block;
    height: 100%;
}
li.btl-list a:after {
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    transition: all 0.5s;
}
li.btl-list a:hover::after {
    background: #f17591;
}
.btl-box {
    position: relative;
    background: #fff;
    display: block;
    z-index: 1;
    height: 100%;
}
.banner-box{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-bottom: 70px;
}
.banner-right img {
    max-width: 100%;
}
.banner-right {
    width: 60%;
}
.banner-left {
    width: 40%;
}
.btl-image {
    width: 100%;
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}
.btl-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.btl-inof {
    padding: 30px;
}
.btl-title {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    line-height: 1.4;
}
.btl-content {
    line-height: 1.4;
    font-size: 14px;
    color: #000;
    padding-top: 10px;
}
.btl-bottom {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 10px;
    display: flex;
    justify-content: space-between;
}
div#AjaxinatePagination a {
    font-size: 16px;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}
div#AjaxinatePagination a:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background:{{ section.settings.btn_bg }};
}
a.btl-home-btn {
    background: {{ section.settings.btn_bg }};
    padding: 12px 60px;
    color: #fff;
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    font-size: 12px;
    display: block;
}
span.btl-home-link-icon {
    position: absolute;
    right: 4px;
    top: 10px;
}
div#AjaxinatePagination span {
    font-size: 16px;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}
div#AjaxinatePagination span:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -4px;
    width: calc(100% + 15px);
    height: 2px;
    background: {{ section.settings.btn_bg }};
}
.banner-toptitle {
    font-size: 20px;
    font-weight: 900;
    color: #000;
    line-height: 1;
}
.banner-contenttext {
    font-size: 45px;
    font-weight: 900;
    color: #fff;
    text-transform: capitalize;
    line-height: 1;
    padding: 15px 20px 30px 0;
}
.banner-bottomtext {
    color: #000;
    line-height: 1.8;
    font-size: 13px;
}
.banner-btnbox {
    padding-top: 50px;
}
.banner-btnbox a {
    background-color: #000;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .88px;
    text-align: center;
    padding: 13px 67px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    z-index: 0;
    transition: transform .3s ease-in-out;
    color: #fff;
}
.banner-btnbox a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: {{ section.settings.btn_bg }};
    transform: scaleX(0);
    transition: transform .5s cubic-bezier(.7,0,.3,1);
    transform-origin: right center;
    z-index: -1;
}
.banner-btnbox a:hover::after{  
    -webkit-transform: scaleX(1);
    -webkit-transform-origin: left center;
}

svg.xiamian-icon-svg {
    transform: translate(6px, 6px);
}
@media(max-width:768px){
.banner-box {
    flex-flow: column;
    padding: 20px 20px 0;
}
.banner-left {
    width: 100%;
}
.banner-right {
    width: 100%;
}
.banner-toptitle {
    font-size: 14px;
}
.banner-contenttext {
    font-size: 25px;
    padding: 12px 10px 15px 0;
}
.banner-bottomtext {
    line-height: 1.8;
    font-size: 11px;
}
.banner-btnbox {
    padding-top: 25px;
    padding-bottom: 30px;
}
.banner-btnbox a {
    font-size: 12px;
    padding: 8px 45px;
}
.btl-main {
    margin-top: 30px;
    padding: 0 20px;
}
li.btl-list {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
}
.btl-bottom {
    padding: 40px 20px;
    overflow: hidden;
    flex-flow: column;
    align-items: center;
}
.btl-paginate {
    margin-bottom: 30px;
}
.btl-home-link {
    width: 100%;
}
a.btl-home-btn {
    display: block;
    width: 80%;
    margin: 0 auto;
}
}  
</style>
{{ 'ajaxinate.min.js' | asset_url | script_tag }}
<div class="banner" style="background: {{ section.settings.bg }};">
  <div class="banner-box">
    <div class="banner-left">
        <div class="banner-toptitle">{{ section.settings.title_top }}</div>
        <div class="banner-contenttext">{{ section.settings.title_content }}</div>
        <div class="banner-bottomtext">{{ section.settings.title_bottom }}</div>
        <div class="banner-btnbox">
            <a href="{{ section.settings.title_link }}">{{ section.settings.button_text }}</a>
        </div>
    </div>
    <div class="banner-right">
      {%if section.settings.image %}
        <img class="ddpro-details-picture" src="{{ section.settings.image | img_url: 'master' }}">
      {%endif%}
    </div>
  </div>
</div>
{% paginate blog.articles by 3 %}
<div class="btl-main">
    <div class="btl-item" id="AjaxinateContainer">      
      {% for article in blog.articles %}
        <li class="btl-list">
          <a href="{{ article.url }}">
            <div class="btl-box">
              <div class="btl-image">
                <img src="{{ article.image.src | img_url: 'master'}}" alt="">
              </div>
              <div class="btl-inof">
                <div class="btl-title">{{ article.title }}</div>
                <div class="btl-content">{{ article.excerpt_or_content}}</div>
              </div>
            </div>            
          </a>
        </li>
      {% endfor %}
    </div>
</div>
<div class="btl-bottom">
    <div class="btl-paginate">
      <div class="grid" id="AjaxinatePagination">
        {% if paginate.next %}
          <a href="{{ paginate.next.url }}" id="AjaxinatePaginationLink">
            <span>More Posts</span>
            <svg class="xiamian-icon-svg" viewBox="0 0 1024 1024" width="30" height="30"><path d="M505.667 312.231V903.52" fill="#000000" p-id="21302"></path><path d="M489.667 312.231h32v591.288h-32z" fill="#000000" p-id="21303"></path><path d="M711.621 692.375l-218.17 218.169" fill="#000000" p-id="21304"></path><path d="M722.942 703.692L504.775 921.86l-22.626-22.627 218.167-218.167z" fill="#000000" p-id="21305"></path><path d="M297.281 692.375l218.17 218.17" fill="#000000" p-id="21306"></path><path d="M526.77 899.233l-22.626 22.627-218.167-218.168 22.626-22.627z" fill="#000000" p-id="21307"></path></svg>
          </a>
        {% endif %}
      </div>
    </div>
  
    <div class="btl-home-link">
        <a href="/" class="btl-home-btn">
          <span class="btl-home-link-text">Shop Now</span>
          <span class="btl-home-link-icon">
            <svg class="btl-home-link-icon-svg" viewBox="0 0 1024 1024" width="17" height="17"><path d="M650.666667 592.981333l72.106666-72.106666-72.106666-72.106667L372.906667 170.666667l-72.106667 72.106666 278.101333 278.442667-278.101333 277.76 72.106667 72.106667z" p-id="21007" fill="#ffffff"></path></svg>
          </span>
        </a>
    </div>
</div>
{% endpaginate %}


<script>
$(function(){
  if($("#AjaxinatePagination a").length<1){
    $("#AjaxinatePagination").html(`<span>All posts loaded</span>`);
  };
})
document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateContainer',
    pagination: '#AjaxinatePagination',
    loadingText: 'Loading...',
    method: 'click',
    callback:function(){
      if($("#AjaxinatePagination a").length<1){
        $("#AjaxinatePagination").html(`<span>All posts loaded</span>`);
      };
    }
  });
});
document.querySelector("#AjaxinatePagination").addEventListener('click', function (event) {
  if (event.target.tagName === 'A') {
    event.preventDefault();
    event.stopPropagation();
  }
});

</script>
{% schema %}
{
  "name": "博客页",  
  "class":"blog-style-list",
  "settings": [
    {
      "type": "color",
      "id": "abg",
      "label": "页面背景颜色",
      "default": "#fff6f6"
    },
    
    {
      "type": "color",
      "id": "bg",
      "label": "banner背景颜色",
      "default": "#fabdcc"
    },
    {
      "type": "color",
      "id": "btn_bg",
      "label": "按钮颜色",
      "default": "#f17591"
    },
    {
      "type": "text",
      "id": "title_top",
      "label": "上标题"
    },
    {
      "type": "text",
      "id": "title_content",
      "label": "标题"
    },
    {
      "type": "textarea",
      "id": "title_bottom",
      "label": "描述"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "按钮文案"
    },
    {
      "type": "url",
      "id": "title_link",
      "label": "按钮链接"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "模块主图"
    }
  ]
}
{% endschema %}